<template>
	<div>
		<div class="material-pic-list">
			<div v-for="(item, index) in modelValue" :key="index" class="material-pic-item" @mouseover="isIconIndex = index" @mouseleave="isIconIndex = -1">
				<i v-if="isIconIndex == index" class="iconfont icon-shanchu material-icon" @click="deleteImg(index)"></i>
				<el-image style="width: 60px; height: 60px" :src="item" :preview-src-list="[item]"></el-image>
			</div>
			<div v-if="modelValue.length < canChooseImagesNum" class="material-pic-item" @click="addPic">+ 图片</div>
		</div>
		<ImgDialog ref="imgDialog" :canChooseImagesNum="canChooseImagesNum" @changeImg="changeImg" />
	</div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
import ImgDialog from './imgDialog/index.vue';
export default defineComponent({
	props: {
		canChooseImagesNum: {
			type: Number,
			default: 1,
		},
		modelValue: {
			type: Array,
			default() {
				return [];
			},
		},
	},
	components: { ImgDialog },
	setup(props, { emit }) {
		const imgDialog = ref();
		const isIconIndex = ref(-1); // 是否展示icon
		const addPic = () => {
			imgDialog.value.dialog = true;
		};

		/**
		 * 删除图片
		 */
		const deleteImg = (index: number) => {
			props.modelValue.splice(index, 1);
		};
		const changeImg = (data: any) => {
			emit('update:modelValue', [...props.modelValue, ...data]);
		};
		return {
			addPic,
			deleteImg,
			imgDialog,
			isIconIndex,
			changeImg,
		};
	},
});
</script>
<style lang="scss">
.material-pic-list {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.material-pic-item {
	position: relative;
	border: 1px solid #efefef;
	width: 60px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	margin-right: 10px;
	cursor: pointer;
}
.material-icon {
	font-size: 30px;
	position: absolute;
	z-index: 1;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	right: -10px;
	top: -28px;
	color: #999999;
}
.material-main {
	display: flex;
	min-height: 550px;
	height: calc(max(100vh - 550px, 300px));
	margin-top: 15px;
	.category {
		display: flex;
		flex-direction: column;
		flex: none;
		width: 240px;
		box-sizing: border-box;
		border: 1px solid #dcdee0;
		margin-right: -1px;
		overflow: hidden;
		.category-tree {
			padding: 20px;
		}
		.footer {
			position: absolute;
			bottom: 2px;
			width: 240px;
			box-sizing: border-box;
			text-align: center;
			padding: 12px 0;
			height: 56px;
			box-shadow: 0 -1px 4px 0 rgb(0 0 0 / 10%);
		}
	}
	.media-list {
		flex: auto;
		box-sizing: border-box;
		border: 1px solid #dcdee0;
		padding: 12px;
		overflow-y: auto;
		.title {
			font-size: 16px;
			line-height: 24px;
			font-weight: 700;
			color: #323233;
		}
	}
}
.image-list {
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	.image-item {
		position: relative;
		width: 160px;
		margin: 6px;
		.image-box {
			box-sizing: content-box;
			position: relative;
			height: 0;
			width: 100%;
			padding-bottom: 100%;
			cursor: pointer;
			background-color: #f7f8fa;
			background-position: 50%;
			background-size: cover;
			background-repeat: no-repeat;
			overflow: hidden;
		}
		.image-title {
			margin: 8px 0 4px;
			font-size: 14px;
			line-height: 20px;
			height: 20px;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
		}
		.image-bar {
			font-size: 0;
			height: 20px;
			button {
				margin-left: 0;
				padding: 0 3px;
			}
		}
	}
}
.popover-input {
	display: flex;
	justify-content: space-between;
}
.attachment-selected {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 2px solid #07d;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	cursor: pointer;
	opacity: 0;

	&:hover,
	&.active {
		opacity: 1;
	}

	i {
		position: absolute;
		right: 1px;
		top: 1px;
		z-index: 7;
		font-size: 12px;
		color: #fff;
	}

	span.after {
		position: absolute;
		display: block;
		content: ' ';
		right: 0;
		top: 0;
		border: 14px solid #07d;
		border-left-color: transparent;
		border-bottom-color: transparent;
		z-index: 1;
	}
}
</style>
